<template>
	<view class="container">
		<!-- 首页标题 -->
		<view class="title">附近门店</view>
		<view>
			<image class="back" src="/static/images/白色左箭头.png" mode="" @click="goBack"></image>
		</view>
		<!-- 地址 -->
		<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" placeholder="输入要搜索的内容" clearButton="none"
			cancelButton="none" style="width: 90%; margin: 10px auto;">
		</uni-search-bar>
		<view
			style="line-height: 30rpx; position: absolute; right: 35px; top: 63px; display: flex; align-items: center;">
			<image style="width: 30rpx; height: 30rpx;" src="/static/search.png"></image>
		</view>

		<!-- 历史记录标签 -->
		<view class="history-section">
			<view class="tag-list">
				<view v-for="(tag, index) in historyTags" :key="index" class="tag-item">
					{{ tag }}
				</view>
			</view>
		</view>

		<view class="item" v-for="(store, index) in storeList" :key="index" @click="storedetails">
			<view style="display: flex; justify-content: space-between;">
				<view style="font-size: 18px; font-weight: 600; margin: 3px 0;">
					{{ store.name }}
				</view>
				<view style="font-size: 12px; color: #3082fb; margin: 5px 0;">
					{{ store.distance }}
				</view>
			</view>
			<view style="font-size: 12px;  margin: 3px 0;">
				⭐⭐⭐⭐ 4分 销量：{{ store.salesvolume }}
			</view>
			<view class="details">
				<image :src="store.image" mode="aspectFill" />
				<view class="details-info">
					<view>
						营业时间：{{ store.businesstime }}
					</view>
					<view>
						{{ store.hours }}
					</view>
					<view>
						{{ store.address }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	
	function goBack() {
		uni.navigateBack();
	}
	
	function storedetails() {
		uni.navigateTo({
			url: "/pages/index/baoyang/nearbystores/storedetail/storedetail"
		})
		
	}

	const historyTags = ref([
		'飞飞洗车美容店',
		'飞飞洗车美容店',
		'飞飞洗车美容店',
		'飞飞洗车美容店',
		'飞飞洗车美容店'
	]);

	const storeList = ref([{
			name: '德意志汽车生活馆',
			distance: '999m',
			salesvolume: '9999',
			image: '/static/home/baoyang/screenshot1.png',
			businesstime: '周一至周五',
			hours: '早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口'
		},
		{
			name: '路西法汽车生活馆',
			distance: '464m',
			salesvolume: '64648',
			image: '/static/home/baoyang/screenshot1.png',
			businesstime: '周一至周五',
			hours: '早上8:00-晚上22:00',
			address: '山阳区后天路与三个路交叉口'
		},
		{
			name: '美利坚汽车生活馆',
			distance: '5524m',
			salesvolume: '1354',
			image: '/static/home/baoyang/screenshot1.png',
			businesstime: '周一至周五',
			hours: '早上8:00-晚上22:00',
			address: '山阳区阿文路与回退路交叉口'
		},
		{
			name: '大不列颠汽车生活馆',
			distance: '5524m',
			salesvolume: '1354',
			image: '/static/home/baoyang/screenshot1.png',
			businesstime: '周一至周五',
			hours: '早上8:00-晚上22:00',
			address: '山阳区阿文路与回退路交叉口'
		},
		{
			name: '法兰西汽车生活馆',
			distance: '5524m',
			salesvolume: '1354',
			image: '/static/home/baoyang/screenshot1.png',
			businesstime: '周一至周五',
			hours: '早上8:00-晚上22:00',
			address: '山阳区阿文路与回退路交叉口'
		},
	]);
</script>

<style>
	.container {
		width: 100%;
		height: 500rpx;
		background-image: url(/static/homebg.png);
		background-size: 100%;
	}
	
	.back {
		position: absolute;
		left: 30rpx;
		top: 34rpx;
		width: 15px;
		height: 15px;
		z-index: 2;
	}
	

	.uni-icons {
		position: absolute;
		top: 10px;
		right: 10px;
		display: none;
	}

	.title {
		color: white;
		width: 100%;
		text-align: center;
		padding-top: 12px;
	}

	/* 历史记录标签样式 */
	.history-section {
		padding: 0 0 0 20px;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		/* 减小标签间距 */
		padding: 10rpx 10rpx;
		/* 增加左右内边距 */
	}

	.tag-list view {
		font-size: 12px;
	}

	.tag-item {
		padding: 10rpx 25rpx;
		/* 调整内边距 */
		background: rgba(255, 255, 255, 0.2);
		/* 半透明背景 */
		border-radius: 30rpx;
		/* 圆角 */
		color: #FFFFFF;
		/* 白色文字 */
		font-size: 24rpx;
		/* 文字大小 */
		white-space: nowrap;
		/* 防止标签内文字换行 */
	}

	/* 门店列表样式 */
	.item {
		margin: 20px 20px;
		background-color: #fff;
		padding: 15px 20px;
		border-radius: 10px;
	}

	.details {
		font-size: 12px;
		margin: 10px 0 0 0;
		display: flex;
	}

	.details image {
		width: 250rpx;
		height: 200rpx;
		margin-right: 10px;
	}

	.details-info view {
		margin: 10px 0;
	}
</style>